<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull @resize="onResize">
			<template #head>
				<cl-title-module
					title="接收定金报表"
					sub-title="以部门人员为单位进行汇总（当前登陆账号所管理的部门）"
					:columns="initColumns"
					:print="printParams"
					v-model="tableData.columns"
					@export-file="exportExcel"
				/>
				<el-row type="flex">
					<cl-filter-group v-model="search">

						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								clearable
								filterable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="请选择"
								filterable
								clearable
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
							/>
						</cl-filter>
						<cl-filter label="预约城市">
							<cl-select
								v-model="search.city_id"
								placeholder="请选择"
								filterable
								clearable
								style="width: 150px"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.city"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table v-bind="tableData" id="depositReport">
				<cl-empty slot="empty" />
			</cl-table>
		</cl-pagefull>
	</cl-crud>
</template>
<script>
	import { exportExcel } from "@/utils/excel";
	import { cloneDeep } from "cl-admin/utils";
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				printParams: {
					id: "depositReport",
					popTitle: "接收定金报表"
				},
				// 表格配置
				tableData: {
					"context-menu": ["refresh"],
					sortRefresh: false,
					columns: [],
					props: {
						showSummary: true,
						summaryMethod: this.getSummaries,
						maxHeight: 500
					}
				},
				initColumns: [
					{
						label: "门店",
						prop: "dept_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true,
						disable: true,
						fixed: true
					},
					{
						label: "城市",
						prop: "city_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true,
						disable: true,
						fixed: true
					},
					{ label: "新客定金人头(售前)", prop: "num_deposit", sortable: true, minWidth: 150 },
					{ label: "总推送", prop: "sum_push", sortable: true, minWidth: 120 },
					{ label: "已接", prop: "has_get", sortable: true, minWidth: 120 },
					{ label: "未接", prop: "not_get", sortable: true, minWidth: 120 },
					{ label: "拒接", prop: "reject_get", sortable: true, minWidth: 120 },
					{ label: "未接率", prop: "not_get_rate", sortable: true, minWidth: 120 },
					{ label: "未推", prop: "not_push", sortable: true, minWidth: 120 },
					{ label: "未推率", prop: "not_push_rate", sortable: true, minWidth: 120 }
				],
				search: {
					biz_id: "",
					company_id: "",
					bra_id: [],
					date: [
						dayjs().startOf("day").format("YYYY-MM-DD"),
						dayjs().endOf("day").format("YYYY-MM-DD")
					],
					city_id: ''
				},
				brandList: [], // 品牌
				cityList: []
			};
		},
		computed: {
			bizRefData() {
				let { biz_id } = this.search;
				return this.getBizRefData(biz_id);
			}
		},
		created() {
			this.search.biz_id = this.getCurrBiz();
			this.init();
			this.tableData.columns = cloneDeep(this.initColumns);
		},
		methods: {
			init() {
				const { biz_id } = this.search;
				this.getBizRefBrand(biz_id);
				this.getBizRefCompany(biz_id);
				this.getBizRefCity(biz_id);
				// this.getCityList()
			},
			onLoad({ ctx, app }) {
				ctx.service(this.$service.onsale)
					.set("dict", {
						api: {
							page: "reportdeposit"
						}
					})
					.done();
				app.refresh(this.search);
			},
			// crud刷新
			refresh() {
				this.$refs.crud.refresh({ page: 1, ...this.search });
			},
			onResize(h) {
				this.tableData.props.maxHeight = h;
			},

			//切换事业部
			changeBiz() {
				this.search.company_id = "";
				this.search.bra_id = [];
				this.search.city_id = "";
				this.init();
				// this.refresh();
			},
			// 表格合计
			getSummaries({ columns, data }) {
				let not_push = 0,
					sum_push = 0,
					not_get = 0;
				return columns.map((column, index) => {
					if (index === 0) {
						return "合计";
					}
					if (column.property === "not_push_rate") {
						if (sum_push) {
							let result = not_push / sum_push;
							return this.toFixed(result * 100) + "%";
						} else {
							return 0 + "%";
						}
					}
					if (column.property === "not_get_rate") {
						let total = sum_push + not_push;
						if (total) {
							let result = not_get / total;
							return this.toFixed(result * 100) + "%";
						} else {
							return 0 + "%";
						}
					}
					const values = data.map((item) => Number(item[column.property]));
					let sum = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						}
						return prev;
					}, 0);
					if (column.property === "not_push") {
						not_push = sum;
					}
					if (column.property === "sum_push") {
						sum_push = sum;
					}
					if (column.property === "not_get") {
						not_get = sum;
					}
					return this.toFixed(sum);
				});
			},
			//品牌
			async getBrands() {
				const { biz_id } = this.search;
				this.brandList = (await this.$store.dispatch("common/getBizBrands", { biz_id })) || [];
			},
			// 获取城市
			// async getCityList(){
			// 	const { biz_id } = this.search
			// 	this.$service.spread.newGetbizcity({ biz_id, user_manager: 1 }).then(data => {
			// 		let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
			// 		this.cityList = list
			// 	})
			// },
			// 导出EXCEl
			exportExcel() {
				exportExcel("#depositReport");
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep {
		.el-table--scrollable-x {
			.el-table__body-wrapper {
				z-index: 2;
			}
		}
	}
</style>
